/**
 * 拖拽移动
 * @param  {elementObjct} bar 鼠标点击控制拖拽的元素
 * @param {elementObjct}  target 移动的元素
 * @param {elementObjct}  mask 遮罩层避免移动卡顿
 * @param {function}  callback 移动后的回调
 */

function getCWidth() {
  return document.body.clientWidth;
}

function getCHeight() {
  return document.body.clientHeight;
}

export function startDrag(bar, target,mask,callback) {

  let params = {
    top: 0,
    left: 0,
    currentX: 0,
    currentY: 0,
    flag: false,
    cWidth: 0,
    cHeight: 0,
    tWidth: 0,
    tHeight: 0,
  };

  // 给拖动块添加样式
  bar.style.cursor = 'move';

  bar.onmousedown = function (event) {
    setMaskStyle(mask,true)
    setShbChatIframeMask(true)
    // 按下时初始化params
    const e = event ? event : window.event;
    const cWidth = getCWidth();
    const cHeight = getCHeight();
    params = {
      top: target.offsetTop,
      left: target.offsetLeft,
      currentX: e.clientX,
      currentY: e.clientY,
      flag: true,
      cWidth,
      cHeight,
      tWidth: target.offsetWidth,
      tHeight: target.offsetHeight,
    };

    // 给被拖动块初始化样式
    target.style.top = params.top + 'px';
    target.style.left = params.left + 'px';

    if (!event) {
      // 防止IE文字选中
      bar.onselectstart = function () {
        return false;
      };
    }

    document.addEventListener('mousemove', mousemoveCallBack)

    document.addEventListener('mouseup', mouseupCallBack)

    function mousemoveCallBack(event) {
      // 防止文字选中
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

      let e = event ? event : window.event;
      if (params.flag) {
        let nowX = e.clientX;
        let nowY = e.clientY;
        // 差异距离
        let disX = nowX - params.currentX;
        let disY = nowY - params.currentY;
        // 最终移动位置
        let zLeft = 0;
        let zTop = 0;

        zLeft = parseInt(params.left) + disX;
        // 限制X轴范围
        if (zLeft <= -parseInt(params.tWidth / 2)) {
          zLeft = -parseInt(params.tWidth / 2);
        }
        if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {
          zLeft = params.cWidth - parseInt(params.tWidth * 0.5);
        }

        zTop = parseInt(params.top) + disY;
        // 限制Y轴范围
        if (zTop <= 0) {
          zTop = 0;
        }
        if (zTop >= params.cHeight - parseInt(params.tHeight * 0.1)) {
          zTop = params.cHeight - parseInt(params.tHeight * 0.1);
        }

        // 执行移动
        target.style.left = zLeft + 'px';
        target.style.top = zTop + 'px';
      }

      if (typeof callback == 'function') {
        callback();
      }
    };

    function mouseupCallBack() {
      params.flag = false;
      removeEvent()
    }

    function removeEvent(){
      setMaskStyle(mask,false)
      setShbChatIframeMask(false)
      document.removeEventListener('mousemove',mousemoveCallBack)
      document.removeEventListener('mouseup',mouseupCallBack)
    }
  };
}

function setMiddle(el) {
  const cWidth = getCWidth();
  const cHeight = getCHeight();
  const tWidth = el.offsetWidth;
  const tHeight = el.offsetHeight;
  el.style.top = (cHeight - tHeight) / 2 + 'px';
  el.style.left = (cWidth - tWidth) / 2 + 'px';
}

function setMaskStyle(el,flag){
  el.style.width = flag ? '100vw' : '0'
  el.style.height = flag ? '100vh' : '0'
  el.style.backgroundColor = flag ? 'transparent' : 'none'
  el.style.position = flag ? 'fixed' : 'initial'
  el.style.zIndex = 99999
}

// 专属客服iframe加蒙层
function setShbChatIframeMask (flag){
  const el = document.getElementById('shb-chat-IframeMask')
  if(!el) return
  const height = document.getElementById('c-logistics-iframe').clientHeight
  el.style.width = flag ? '100%' : '0'
  el.style.height = flag ? `${height}px` : '0'
  el.style.backgroundColor = flag ? 'transparent' : 'none'
  el.style.position = flag ? 'absolute' : 'initial'
  el.style.zIndex = 2
  el.style.left = 0
  el.style.bottom = 0
}

export default {
  inserted(el, { value }) {
    setMiddle(el);

    const bar = document.querySelector(value.bar);
    const target = document.querySelector(value.target);
    const mask = document.querySelector(value.mask);
    startDrag(bar, target,mask,value.callback);
  },
  update(el) {
    setMiddle(el);
  },
};
